<html>
    <head>
        {foreach item=sd from=$seldest}
            {assign var='id' value=$sd.id}
            {assign var='curselection' value=$sd.country}
            {assign var='color1' value=$sd.color1}
            {assign var='color2' value=$sd.color2}
        {/foreach}

        <title>{$title|default:"no title"}</title>

        {literal}
            <link href="css/fontstyle.css" rel="stylesheet" type="text/css" charset="utf-8" />
            <link href="css/style.css" rel="stylesheet" type="text/css" />

            <link rel="stylesheet" href="css/jqx.base.css" type="text/css" />

            <link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />

            <style type="text/css">
                .gradientcatmenu_sm {
                    font-family:'Myriad Pro';
                    font-size: 14px;
                    font-weight: bold;
                    background: #{/literal}{$color1}{literal};
                    background: -moz-linear-gradient(left,  #{/literal}{$color1}{literal} 0%, #{/literal}{$color2}{literal} 50%, #{/literal}{$color1}{literal} 100%);
                    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#{/literal}{$color1}{literal}), color-stop(50%,#{/literal}{$color2}{literal}), color-stop(100%,#{/literal}{$color1}{literal}));
                    background: -webkit-linear-gradient(left,  #{/literal}{$color1}{literal} 0%,#{/literal}{$color2}{literal} 50%,#{/literal}{$color1}{literal} 100%);
                    background: -o-linear-gradient(left,  #{/literal}{$color1}{literal} 0%,#{/literal}{$color2}{literal} 50%,#{/literal}{$color1}{literal} 100%);
                    background: -ms-linear-gradient(left,  #{/literal}{$color1}{literal} 0%,#{/literal}{$color2}{literal} 50%,#{/literal}{$color1}{literal} 100%);
                    background: linear-gradient(left,  #{/literal}{$color1}{literal} 0%,#{/literal}{$color2}{literal} 50%,#{/literal}{$color1}{literal} 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{/literal}{$color1}{literal}', endColorstr='#{/literal}{$color2}{literal}',GradientType=1 );

                    color: white;
                    box-shadow: 5px 5px 5px #888888;
                    -moz-box-shadow:    5px 5px 5px #888888;
                    -webkit-box-shadow: 5px 5px 5px #888888;
                }
                .gradientcatmenu_sm a {
                    color: white;
                    text-decoration: none;
                }
                .sortlabel {
                    padding-top: 4px;
                    font-family:'Myriad Pro';
                    font-size: 14px;
                }
                .triangle-down {
                    width: 0;
                    height: 0;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-top: 10px #{/literal}{$color2}{literal} solid;
                    vertical-align: top;
                    margin-top: -10px;
                }
                .triangle-topleft {
                    width: 0;
                    height: 0;
                    border-top: 10px solid #{/literal}{$color2}{literal}; 
                    border-left: 10px solid transparent;
                    padding-top: 8px;
                }
                .triangle-topright {
                    width: 0;
                    height: 0;
                    border-top: 10px solid #{/literal}{$color2}{literal}; 
                    border-right: 10px solid transparent;
                    padding-top: 8px;
                }

                #packages {
                    width: 900px;

                    height: 330px;
                    overflow: auto;
                }
            </style>


            <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

            <script type="text/javascript" src="js/gettheme.js"></script>

            <script type="text/javascript" src="js/jqxcore.js"></script>
            <script type="text/javascript" src="js/jqxbuttons.js"></script>
            <script type="text/javascript" src="js/jqxscrollbar.js"></script>
            <script type="text/javascript" src="js/jqxlistbox.js"></script>
            <script type="text/javascript" src="js/jqxdropdownlist.js"></script>

            <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
            <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>

            <script src="js/jPaginate.js"></script>

            <script language="javascript" type="text/javascript">
                $(document).ready(function () {
                    //initpage();

                    var theme = getTheme();
                    var source = ["Special Offer","Lower Price","Alphabet"];
                    // Create a jqxDropDownList
                    $("#cbosort").jqxDropDownList({ source: source, selectedIndex: 0, width: '180', height: '25', theme: theme });
                    $('#cbosort').bind('select', function (event) {
                        var args = event.args;
                        //var item = $('#cbosort').jqxDropDownList('getSelectedIndex', args.index);
                        var idx = $('#cbosort').jqxDropDownList('getSelectedIndex');

                        var packageid = document.getElementById("selectedpackage").value;
                        getpackages('{/literal}{$id}{literal}',packageid);
                    });

                    //$('#scrollbar1').tinyscrollbar();
                    //    alert('x');
                    //hide triangle
                    $("#individual_triangle").show();
                    $("#group_triangle").hide();
                    $("#land_triangle").hide();

                    var idname = 'packagesmenu';
                    //alert(idname);
                    document.getElementById(idname).classList.add('current_menu');

                    $('#packages').jScrollPane();
                });


                function previous(){

                    new_page = parseInt($('#current_page').val()) - 1;
                    //if there is an item before the current active link run the function
                    if($('.active_page').prev('.page_link').length==true){
                        go_to_page(new_page);
                    }
                }

                function next(){
                    new_page = parseInt($('#current_page').val()) + 1;
                    //if there is an item after the current active link run the function
                    if($('.active_page').next('.page_link').length==true){
                        go_to_page(new_page);
                    }
                }

                function go_to_page(page_num){
                    //get the number of items shown per page
                    var show_per_page = parseInt($('#show_per_page').val());

                    //get the element number where to start the slice from
                    start_from = page_num * show_per_page;

                    //get the element number where to end the slice
                    end_on = start_from + show_per_page;

                    //hide all children elements of packages div, get specific items and show them
                    $('#packages').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

                    /*get the page link that has longdesc attribute of the current page and add active_page class to it
                    and remove that class from previously active page link*/
                    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

                    //update the current page input field
                    $('#current_page').val(page_num);
                }

                function getpackages(destid, packageid) {
                    
                    var category = '';
                    var selIndex = $("#cbosort").jqxDropDownList('getSelectedIndex');

                    showtriangle(packageid);

                    document.getElementById("selectedpackage").value = packageid;
                    document.getElementById("selectedsort").value = selIndex;

                    jQuery.ajax({
                        url: 'getpackages.php',
                        data: {
                            'destid'        : destid,
                            'packageid'     : packageid,
                            'sortfield'     : selIndex
                        },
                        type: 'post',
                        success: function(json) {
                            $("#packages").html(json);
                            //document.getElementById('packages').innerHTML = json;

                            /* pagination */
                            $("#rightframecontent").find('ul').remove();
                            $("#packages").jPaginate({elementtag: 'tr'});
                            /* end pagination */


                            //update breadcrumb
                            jQuery.ajax({
                                url: 'getcategory.php',
                                data: {
                                    'packageid'     : packageid
                                },
                                type: 'post',
                                success: function(json2) {
                                    category = json2;
                                    //document.getElementById('container_breadcrumb').innerHTML = 'Home > Our Packages > '+'{/literal}{$curselection}{literal} > ' + category;
                                    $('#container_breadcrumb').html('Home > Our Packages > '+'{/literal}{$curselection}{literal} > ' + category);
                                    $("#cbosort").jqxDropDownList('selectIndex', selIndex);
                                }
                            })
                            //end update breadcrumb
                        }
                    })


                }

                function showtriangle(packageid) {
                    if (packageid == 1) {
                        $("#individual_triangle").show();
                        $("#group_triangle").hide();
                        $("#land_triangle").hide();
                    } else if (packageid==2) {
                        $("#individual_triangle").hide();
                        $("#group_triangle").show();
                        $("#land_triangle").hide();
                    } else {
                        $("#individual_triangle").hide();
                        $("#group_triangle").hide();
                        $("#land_triangle").show();
                    }
                }
            
            </script>

        {/literal}
    </head>
    <body id='about' onload="getpackages('{$id}','1');">
        {include file='header.tpl'}

        <div id="container_breadcrumb">
            Home > Our Packages > {$curselection} >
        </div>

        <div id="container_package">
            <input type="hidden" id="selectedpackage" />
            <input type="hidden" id="selectedsort" />
            <input type='hidden' id='current_page' />
            <input type='hidden' id='show_per_page' />

            <table border="0" 
                   width="100%" 
                   cellspacing="0" 
                   cellpadding="0">
                <tr valign="top">
                    <td width="25%" valign="top">
                        <div id="leftframetitle">
                            <span class="red_color">OUR</span><span class="black_color">PACKAGES</span>
                        </div>

                        {foreach item=d from=$dest}
                            <div id="leftframecontent">
                                <img class="packagebutton" src="{$d.button_img}" />

                                <a href="packagecategory.php?id={$d.id}&s=">
                                    <div class="packagelink">
                                        {$d.country|upper}
                                    </div>
                                </a>

                            </div>
                        {/foreach}
                    </td>
                    <td>
                        <div id="rightframecontent">
                            <table border="0" width="84%" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="20%" class="gradientcatmenu_sm" align="center">
                                        <a href="#" onclick="getpackages('{$id}','1'); return true;">
                                            INDIVIDUAL PACKAGES
                                        </a>
                                    </td>
                                    <td width="1%" class="gradientcatmenu_sm" align="center">
                                        <img src="images/separator.png" />
                                    </td>
                                    <td width="20%" class="gradientcatmenu_sm" align="center">
                                        <a href="#" onclick="getpackages('{$id}','2');">
                                            GROUP PACKAGES
                                        </a>
                                    </td>
                                    <td width="1%" class="gradientcatmenu_sm" align="center">
                                        <img src="images/separator.png" />
                                    </td>
                                    <td width="20%" class="gradientcatmenu_sm" align="center">
                                        <a href="#" onclick="getpackages('{$id}','3');">
                                            LAND ARRANGEMENT
                                        </a>
                                    </td>
                                    <td width="1%" class="gradientcatmenu_sm" align="center">
                                        <img src="images/separator.png" />
                                    </td>
                                    <td width="20%" class="gradientcatmenu_sm" align="left">
                                        <div class="sortlabel">Sort by</div>
                                        <div id='cbosort' class='sortcombo'></div>
                                    </td>
                                </tr>

                                <tr>                                    
                                    <td width="20%" align="center">
                                        <table border="0" width="100%" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="45%">
                                                    <div class="triangle-topleft" id="triangle_left"></div>
                                                </td>

                                                <td>
                                                    <div class="triangle-down" id="individual_triangle"></div>
                                                </td> 
                                            </tr>
                                        </table>
                                    </td>
                                    <td width="1%" align="center">
                                        &nbsp;
                                    </td>
                                    <td width="20%" align="center">
                                        <div class="triangle-down" id="group_triangle"></div>
                                    </td>
                                    <td width="1%" align="left">
                                        &nbsp;
                                    </td>
                                    <td width="20%" align="center">
                                        <div class="triangle-down" id="land_triangle"></div>
                                    </td>
                                    <td width="1%" align="left">
                                        &nbsp;
                                    </td>
                                    <td align="right">
                                        <div class="triangle-topright" id="triangle_right"></div>
                                    </td>
                                </tr>
                            </table>

                            <!--
                                                        <div id="scrollbar1">
                                                            <div class="scrollbar">
                                                                <div class="track">
                                                                    <div class="thumb">
                                                                        <div class="end">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="viewport">
                                                                <div class="overview">
                            -->

                            <!-- here -->
                            <div id="packages">
                                No Packages Found
                            </div>



                            <!--
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                            -->
                    </td>
                </tr>
            </table>

            <div id='page_navigation'>pagination</div>

            <div id="footer-spacer"></div>
        </div>

        {include file='footer.tpl'}

    </body>
</html>